<script lang="ts" setup>
// import { useSettingsStore } from '@/store/modules/settings'

const $sub: any = inject("$sub");
const $baseMessage: any = inject("$baseMessage");

// const { getTitle } = useSettingsStore()

const { pkg, lastBuildTime } = __APP_INFO__;
const { version } = pkg;

const state = reactive({
  title: "弹框", //getTitle,
  version: version,
  updateTime: lastBuildTime,
  dialogVisible: false,
  loading: false,
  button: "立即升级"
});

onBeforeMount(() => {
  $sub("vab-update", () => {
    state.dialogVisible = true;
    setTimeout(() => {
      save();
    }, 1000 * 3);
  });
});

const close = () => {
  state.dialogVisible = false;
};

const save = () => {
  state.button = "正在更新";
  state.loading = true;
  $baseMessage("正在更新，预计10S后更新完成", "success", "vab-hey-message-success");
  setTimeout(() => {
    state.loading = false;
    state.button = "更新完成";
  }, 1000 * 6);

  setTimeout(() => {
    location.reload();
  }, 1000 * 7);
};
</script>

<template>
  <el-dialog v-model="state.dialogVisible" append-to-body custom-class="vab-update" width="410px" @close="close">
    <div class="vab-update-icon">
      <vab-icon icon="upload-cloud-2-fill" />
    </div>
    <vab-icon class="vab-update-cup" icon="cup-line" />
    <h3>版本更新：</h3>
    <p>
      {{ state.title }}
      V{{ state.version }}
    </p>
    <p>
      更新时间：最近更新
      <!-- {{ updateTime }} -->
    </p>
    <p v-text="`${'如遇更' + '新失败' + '请手' + '动点击' + 'Ctr' + 'l + F' + '5' + '重试'}`"></p>
    <template #footer>
      <el-button v-loading="state.loading" size="large" type="primary" @click="save">
        {{ state.button }}
      </el-button>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.vab-update {
  position: relative;
  &-icon {
    position: absolute;
    top: -50px;
    left: 50%;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background: linear-gradient(50deg, var(--el-color-primary), var(--el-color-primary-light-7));
    border-radius: 50%;
    transform: translateX(-50%);
    i {
      font-size: 50px;
      color: #ffffff;
    }
  }
  &-cup {
    position: absolute;
    right: 20px;
    bottom: 70px;
    font-size: 80px;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(var(--el-color-primary-light-7), var(--el-color-primary-light-9));
    background-clip: text;
  }
}
</style>

<style lang="scss">
.vab-update {
  &.el-dialog {
    margin-top: 30vh !important;
    border-radius: 15px;
    .el-dialog__body {
      margin: 0 40px;
    }
    .el-dialog__footer {
      text-align: center !important;
      .el-button {
        width: 200px;
        margin-bottom: 20px;
        background: linear-gradient(50deg, var(--el-color-primary-light-3), var(--el-color-primary));
        border: 0;
        border-radius: 20px;
      }
    }
  }
}
</style>
